<template>
    <div>
        <van-swipe :autoplay="2000">
            <van-swipe-item
                v-for="image in images"
                :key="image.videoId"
                @click="pitch(image.videoId)"
            >
                <!-- <template #default> -->
                <div class="swipe-content">
                    <!-- 懒加载快一点 -->
                    <img v-lazy="image.imgURL" class="swipe-img" />
                    <div class="swipe-mask">
                        <div class="box">
                            <div class="title van-ellipsis">
                                {{ image.title }}
                            </div>
                            <div class="subhead van-ellipsis">
                                {{ image.subhead }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- </template> -->
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { getSwipeImg } from '@/api/jia/index';
export default {
    props: {
        id: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            images: [] // 轮播图图片
        };
    },
    created() {
        this.getSwipeImg();
    },
    methods: {
        async getSwipeImg() {
            // this.$toast.loading({
            //     message: '加载中...',
            //     forbidClick: true, // 禁用背景点击
            //     duration: 0 // 持续时间，默认是 2000，如果为 0 则持续展示
            // });

            try {
                const { data } = await getSwipeImg({ id: this.id });
                this.images = data;
            } catch (error) {
                this.$toast('请检查网络刷新重试');
            }
        },
        // changeSwipe(index) {
        //     console.log(index);
        // },
        //  点击轮播图触发
        pitch(id) {
            this.$router.push(`/episode/${id}`)
        }
    }
};
</script>

<style scoped lang="scss">
.swipe-content {
    transform: translateZ(0); // 《== 关键
    .swipe-img {
        width: 100%;
        height: 440px;
    }
    .swipe-mask {
        position: fixed;
        width: 100%;
        height: 120px;
        bottom: 20px;
        color: rgba(255, 255, 255, 100);
        background-color: rgba(0, 0, 0, 0.5);
        // line-height: 8px;
        .box {
            margin-left: 35px;
            width: 60%;
            .title {
                margin: 15px 0;
                font-size: 35px;
                text-align: left;
            }
            .subhead {
                font-size: 12px;
                text-align: left;
            }
        }
    }
}
/deep/.van-swipe__indicators {
    left: 97%;
    width: 40%;
    bottom: 35px;
    .van-swipe__indicator {
        width: 12px;
        height: 12px;
        margin: 0 6px;
        opacity: 0.6;
    }
    .van-swipe__indicator--active {
        width: 24px;
        height: 12px;
        border-radius: 5px;
        background-color: #fff;
        opacity: 1;
    }
}
/deep/.van-swipe {
    height: 440px;
}
</style>
